<template>

    <div>
        <!--pagetwo-->
<div data-role="page" id="pagetwo">
    <section class="comment-con">
        <div class="nav-group">
            <a href="javascript:void (0)" class="btn" :class="{active:1==type_style}" @click="xiuxiu_1(1)">全部</a>
            <a href="javascript:void (0)" class="btn" :class="{active:3==type_style}" @click="xiuxiu_1(3)">最新</a>
            <a href="javascript:void (0)" class="btn" :class="{active:2==type_style}" @click="xiuxiu_1(2)">有图（{{xiuxiu_length}}）</a>
        </div>
        <div class="tab-content" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="3">
            <div class="tab-content-in" >
                <ul class="list-ul">
                    <li class="list-li" v-for="(item,inde) in CommentList" :key="item.inde">
                        <div class="left-info">
                            <img :src="item.headImgUrl" alt="" v-if="0==item.anonymous">
                             <img src="../../../assets/personal/images/niming.png" alt="" v-else>
                        </div>
                        <div class="right-info">
                            <div class="name" v-if="0==item.anonymous">{{item.nickName}}</div>
                            <div class="name" v-else>匿名用户</div>
                            <div class="commodity-info">
                                <span class="time">{{item.ctime | formatDateTIME}}</span>
                                 <router-link :to="{name:'Commodity_details',query:{id:item.goodsId,subid:0}}" v-if="undefined!=shopsID">
                                     <p class="a_href">点我查看商品</p>
                                 </router-link>
                                <span class="color" v-show="false"> 颜色分类：白色连衣裙</span>
                                <span class="size" v-show="false"> 尺码：XL</span>
                            </div>
                            <div class="text-details">
                               {{item.commentContent}}
                            </div>
                            <div class="all-img" @click="comment_btn(item.id)">
                                <div class="same-box" v-for="(itemm,ind) in item.arimgs"  :key="ind" v-if="itemm!=''">
                                    <img :src="itemm" >

                                </div>
                            </div>
                            <div class="bottom-info" >
                                <span class="liulan" style="width:50%;"></span>
                                <a >
                                    <span class="cmt" @click="comment_btn(item.id)"><i class="icon"></i>评论<i v-if="0!=item.commentTotal">({{item.commentTotal}})</i></span>
                                </a>
                                <span class="zan" @click=" thumbsUp(item.id,inde)">
                                    <img v-if="'Yes'!=item.thumpsUpType" src='../../../assets/personal/images/zan.png' class="zan_img" >
                                    <img v-else src='../../../assets/personal/images/zan-active.png' class="zan_img" >
                                    <i>点赞</i><i v-if="0!=item.thumbsUp">({{item.thumbsUp}})</i></span>
                            </div>
                        </div>

                    </li>
                </ul>
                 <loadingtmp :busy="busy" :datalength="CommentList.length" :loadall="loadall"></loadingtmp>
            </div>
        </div>
    </section>
    <div id="backtop"></div>
</div>
    </div>
</template>
<style scoped>
  @import "../../../assets/personal/css/commodity_details.css";
  .zan_img{
         width: 14px;
        height: 14px;
        margin:0 3px;
  }
  .tab-content{
     height: 600px;
     overflow: scroll;
  }
  .a_href{
      color:blue;
      padding: 7px 0;
  }
  </style>
<script>
import loadingtmp from '@/components/load/loading'
export default {
    data () {
        return {
            CommentList:{},
            goodsID:this.$route.query.goods,
            page: 1,
            pageSize: 3,
            busy: false,////////////
            loadall: false,
            type:1,
            type_style:1,
            xxCount:'',
            shopsID:this.$route.query.id,
            xiuxiu_length:[],
            TiTle:this.$route.query.tiTle,
            fenxiangUrl:this.$route.query.fenxiangUrl,
        }
    },
    components: {
       loadingtmp
    },
    mounted(){
        this.xiuxiu_index();
        this.getwxconfig();
    },
    methods:{
      getwxconfig(){
        var vm= this;
        console.log(vm);
        this.$http.get(this.APIURL_PREFIX+"/api/wxs/config?url="+escape(location.href.split('#')[0])).then((response) => {
          console.log(response.data);
        var appid = 'wx488ae3f57360b7ea';
        wx.config({
          debug: false,
          appId: appid,
          timestamp: response.data.data.timestamp,
          nonceStr: response.data.data.noncestr,
          signature: response.data.data.signature,
          jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone','scanQRCode']
        });
        wx.ready(function(){
          wx.onMenuShareTimeline({
            title: vm.TiTle,
            link: "http://"+window.location.host+"/wap/wx/login?fk=1-45-"+localStorage.headid+"-"+vm.shopsID,
            imgUrl:vm.fenxiangUrl,
            desc:vm.TiTle + "的评论",
            success: function () {
            },
            cancel: function () {
            }
          });
          wx.onMenuShareAppMessage({
            title: vm.TiTle,
            link: "http://"+window.location.host+"/wap/wx/login?fk=1-45-"+localStorage.headid+"-"+vm.shopsID,
            imgUrl:vm.fenxiangUrl,
            desc:vm.TiTle + "的评论",
            success: function () {
            },
            cancel: function () {
            }
          });
          wx.onMenuShareQQ({
            title: vm.TiTle,
            link: "http://"+window.location.host+"/wap/wx/login?fk=1-45-"+localStorage.headid+"-"+vm.shopsID,
            imgUrl:vm.fenxiangUrl,
            desc:vm.TiTle + "的评论",
            success: function () {
            },
            cancel: function () {
            }
          });
          wx.onMenuShareWeibo({
            title: vm.TiTle,
            link: "http://"+window.location.host+"/wap/wx/login?fk=1-45-"+localStorage.headid+"-"+vm.shopsID,
            imgUrl:vm.fenxiangUrl,
            desc:vm.TiTle + "的评论",
            success: function () {
            },
            cancel: function () {
            }
          });
          wx.onMenuShareQZone({
            title: vm.TiTle,
            link: "http://"+window.location.host+"/wap/wx/login?fk=1-45-"+localStorage.headid+"-"+vm.shopsID,
            imgUrl:vm.fenxiangUrl,
            desc:vm.TiTle + "的评论",
            success: function () {
            },
            cancel: function () {
            }
          });

        });
      }).catch(function(err){
          console.log(err)
        });

      },
         xiuxiu_index(){
             var params={}
             if(this.shopsID){
                 params.companyId=this.shopsID
             }else{
                  console.log("123"+this.goodsID )
                 params.goodsId=this.goodsID
             }

             console.log("yes")
              this.$http.get(this.APIURL_PREFIX + '/api/wap/commentXx/count',{params}).then((response) => {
                  this.xiuxiu_length=response.data.data
               })
              .catch(function (err) {

               });
         },
         xiuxiu_1:function(type){
             if(1==type){
                 this.type_style=type
             }else if(2==type){
                 this.type_style=type
             }else{
                 this.type_style=type
             }
              this.type=type
              this.page=1;
              this.busy=false,////////////
              this.loadall=false,
              this.CommentList={}
              this.loadMore();
         },
          thumbsUp:function(ping_id,inde){
                this.$http.put(this.APIURL_PREFIX + '/api/wap/comment/thumbsUp', $.param({id:ping_id})).then((response) => {
                  if("Yes"==this.CommentList[inde].thumpsUpType){
                      this.CommentList[inde].thumpsUpType="NO"
                      this.CommentList[inde].thumbsUp=this.CommentList[inde].thumbsUp-1
                  }else{
                      this.CommentList[inde].thumpsUpType="Yes"
                       this.CommentList[inde].thumbsUp=this.CommentList[inde].thumbsUp+1
                  }
             }).catch(function (err) {
           });
        } ,
        comment_btn:function(id,comid){
              this.$router.push({name:'Commentreply',query:{godid:id,companyId:comid,goodsID:this.goodsID}})
        },
        comment(flag){//评论
          var params={}
           params.page=this.page
           params.rows=this.pageSize
         if(this.shopsID){//详情
             params.companyId=this.shopsID
             console.log("详情")
        }else{//商品
         console.log("详情+1")
             params.goodsId=this.goodsID
        }
           if(1==this.type||3==this.type){
               console.log(this.shopsID)
                  this.$http.get(this.APIURL_PREFIX+"/api/wap/commentPl/goods", {params}).then((response) => {
                  var arXX = response.data.data//.plsList
                  arXX = arXX.map(function(item,index,ar){
                    item.arimgs = item.imgContent.split(",");
                    return item;
                  })
                  if (flag) {
                       this.CommentList = this.CommentList.concat(arXX);;
                  } else {
                    this.CommentList = arXX;
                 }
                if (0 == response.data.data.length || response.data.data.length < this.pageSize) {
                    this.busy = true;
                    this.loadall = true;
                }
                else {
                    this.busy = false;
                    this.page++
                 }
                 this.xxCount=response.data.data.xxCount
               }).catch(function(err){
                 console.log(err)
              })
           }else{
               this.$http.get(this.APIURL_PREFIX+"/api/wap/commentXx/goods",{ params}).then((response) => {
                  var arXX = response.data.data
                  arXX = arXX.map(function(item,index,ar){
                    item.arimgs = item.imgContent.split(",");
                    return item;
                  })
                  if (flag) {
                       this.CommentList = this.CommentList.concat(arXX);;
                  } else {
                    this.CommentList = arXX;
                 }
                if (0 == response.data.data.length || response.data.data.length < this.pageSize) {
                    this.busy = true;
                    this.loadall = true;
                }
                else {
                    this.busy = false;
                    this.page++
                 }
               }).catch(function(err){
                 console.log(err)
              })
           }
       },
        loadMore() {
            this.busy = true;
            setTimeout(() => {
                this.comment(this.page > 1);
            }, 500);
        },
    }
}
</script>


